<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <div class="contents">
    <!-- Left -->
    <div class="contetn_left">
      <!-- Left-top -->
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        :title="titleLC"
        style="padding: 0 10px 16px 10px"
      >
        <i class="el-icon-full-screen full" @click="showCom('LeftCenter',titleLC)"></i>
        <LeftCenter />
      </ItemWrap>

      <!-- Left-center -->
      <ItemWrap class="contetn_left-top contetn_lr-item" :title="titleLT">
        <i class="el-icon-full-screen full" @click="showCom('LeftTop',titleLT)"></i>
        <LeftTop />
      </ItemWrap>

      <!-- Left-bottom -->
      <ItemWrap class="contetn_left-center contetn_lr-item" :title="titleLB">
        <i class="el-icon-full-screen full" @click="showCom('LeftBottom',titleLB)"></i>
        <LeftBottom />
      </ItemWrap>
    </div>
    <!-- Center -->
    <div class="contetn_center">
      <ItemWrap12 class="contetn_center-bottom" :title="titleCT">
        <i class="el-icon-full-screen full" @click="showCom('CenterTop',titleCT)"></i>
        <CenterTop />
      </ItemWrap12>
      <ItemWrap12 class="contetn_left-bottom contetn_lr-item" :title="titleCC">
        <i class="el-icon-full-screen full" @click="showCom('CenterCenter',titleCC)"></i>
        <CenterCenter />
      </ItemWrap12>
      <ItemWrap12 class="contetn_center-bottom" :title="titleRB">
        <i class="el-icon-full-screen full" @click="showCom('RightBottom',titleRB)"></i>
        <RightBottom />
      </ItemWrap12>
    </div>
    <!-- Right -->
    <div class="contetn_right">
      <!-- Right-top -->
      <ItemWrap8 class="contetn_left-bottom contetn_lr-item" :title="titleRT">
        <i class="el-icon-full-screen full" @click="showCom('RightTop',titleRT)"></i>
        <RightTop />
      </ItemWrap8>

      <!-- Right-center -->
      <ItemWrap8 class="contetn_center-bottom" :title="titleCB">
        <i class="el-icon-full-screen full" @click="showCom('CenterBottom',titleCB)"></i>
        <CenterBottom />
      </ItemWrap8>

      <!-- Right-bottom -->
      <ItemWrap8
        class="contetn_left-bottom contetn_lr-item"
        :title="titleRC"
        style="padding: 0 10px 16px 10px"
      >
        <i class="el-icon-full-screen full" @click="showCom('RightCenter',titleRC)"></i>
        <RightCenter />
      </ItemWrap8>
    </div>
    <!-- Dialog -->
    <el-dialog title :visible.sync="visible" width="80%" append-to-body center class="contents">
      <ItemWrap8 class="diag" :title="dialogTitle">
        <component :is="dialogCom" ref="dialogContent"></component>
      </ItemWrap8>
    </el-dialog>
  </div>
</template>

<script>
import LeftTop from "./left-top.vue";
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import Center from "./center.vue";
import CenterTop from "./center-top.vue";
import CenterCenter from "./center-center.vue";
import CenterBottom from "./center-bottom.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";

export default {
  components: {
    LeftTop,
    LeftCenter,
    LeftBottom,
    CenterTop,
    CenterCenter,
    CenterBottom,
    Center,
    RightTop,
    RightCenter,
    RightBottom
  },
  data() {
    return {
      visible: false,
      dialogCom: "",
      dialogTitle: "",
      titleLT: "Lifecycle Key Indicators",
      titleLC: "FuelEU Compliance & Cost",
      titleLB: "Fuel Price Prediction",
      titleCT: "CII Compliance",
      titleCC: "Decarbonization Solution  Timeline",
      titleCB: "CO2 Emission Prediction",
      titleRT: "Decarbonization Cost",
      titleRC: "Fuel EU - GHGIE Compliance Prediction",
      titleRB: "Fuel Ratio"
    };
  },
  computed: {},
  filters: {
    numsFilter(msg) {
      return msg || 0;
    }
  },
  created() {},
  mounted() {},
  methods: {
    showCom(name, title) {
      this.dialogCom = name;
      this.dialogTitle = title;
      this.visible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
// 内容
.contents {
  .contetn_left,
  .contetn_right {
    width: 600px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 600px;
  }

  //左右两侧 三个块
  .contetn_lr-item {
    height: 310px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
  }
  .diag {
    height: 65vh;
    background-image: url("../../assets/img/pageBg.png");
    background-size: cover;
    background-position: center center;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    position: relative;
    overflow: hidden;
    z-index: 100;
    transform-origin: left top;
  }
  .full {
    position: absolute;
    top: 5.5%;
    right: 3%;
    cursor: pointer;
  }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
